import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Modal } from 'antd-mobile'
import './index.scss'
import GobackHeader from '../../../../components/user/GobackHeader'
class Com extends Component {
	constructor(props){
		super(props)
		this.state = {
			modalShare : false
		}
	}
	shareQr(){
		// alert('分享')
		this.setState({
			modalShare: true
		})
	}
	saveImg(){
		alert('保存')
	}
	render(){
		return (
		<div className="myQr">
			<GobackHeader title="我的二维码"/>
			<div className="Qr">
				<img src="/images/user_ images/myqr.png" alt=""/>
			</div>
			<div className="Qr-bottom">
				<button className="Qr-savaImg buttonF"  onClick={()=>{
					this.saveImg()
				}}>保存至相册</button>
				<button className="Qr-share" onClick={()=>{
					this.shareQr()
				}}>分享给好友</button>
			</div>
			<Modal
				closable = {true}
				animationType="slide-up"
				popup
				onClose = {()=>{this.setState({modalShare:false})}}
				maskClosable ={ true }
				visible= {this.state.modalShare}
			>
				<div className="qr-wrap">
					<div className="qr-title">
						<span>分享到</span>
					</div>
					<div className="qr-flex">
					<div className='qr-img'>
						<img src="/images/user_ images/WeChat.png" alt=""/>
						<span>微信</span>
					</div>
					<div className='qr-img'>
						<img src="/images/user_ images/qq.png" alt=""/>
						<span>QQ</span>
					</div>
					<div className='qr-img'>
						<img src="/images/user_ images/qq-zone.png" alt=""/>
						<span>QQ空间</span>
					</div>
					<div className='qr-img'>
						<img src="/images/user_ images/weibo.png" alt=""/>
						<span>微博</span>
					</div>
					<div className='qr-img'>
						<img src="/images/user_ images/CopyLink.png" alt=""/>
						<span>复制链接</span>
					</div>	
						{/* <img src="" alt=""/>
						<img src="" alt=""/>
						<img className='rzero4' src="" alt=""/>
						<img src="" alt=""/> */}
					</div>
				</div>
			</Modal>
		</div>)
	}
}
export default connect()(Com)